<template>
  <div>
       <div class="top_header">
  <span v-for="(item,index) in mvType" @click="" >{{item.text}}</span>
</div>
<div class="card_content">
<div v-for="(item,index) in mvlist" class="top_item">
<img :src="item.cover" alt="" class="list_img" @click="playList(item)">
  <span>{{item.name}}  </span>
  <span>{{`🎸  ${item.artistName}🎺`}}</span>
</div>
</div>
  </div>
  <div class="video" v-if="showMv">
    <TVideo/>
  </div>
</template>

<script lang="ts" setup>
import TVideo from '@/base-ui/TPlay/src/TVideo.vue';
import { useStore } from '@/store';
import { useRouter } from 'vue-router';
import { computed ,watchEffect,ref} from 'vue'
import  emitterMv  from '@/utils/mittEvent';

const router= useRouter()
const store = useStore()
const showMv = ref(false)


const mvlist = ref()
const mvType = [
  {
    text: '全部',
    value: '0'
  },
    {
    text: '官方版',
    value: '7'
  },
    {
    text: '现场版',
    value: '96'
  },
    {
    text: '网易出品',
    value: '8'
  },
]

watchEffect(()=>{
 mvlist.value= store.state.music.mvList

})
store.dispatch('music/getNewMv')

const playList = (item: unknown)=>{
  showMv.value = true
emitterMv.emit("MV", item);
}
</script>
<style lang="less" scoped>
.video{
  width: 1250px;
  height: 700px;
  margin: -295px  250px;
}
.card_content{
  margin-top: -210px;
  margin-left: 300px;
  width: 1500px;
  height: 500px;
  position: absolute;
  .top_item{
    display: inline-block;
    margin: 20px 80px;
width: 200px;

height: 180px;
background-color: brown;
  }
}
.top_header{
  margin: -250px  380px;
 position: absolute;
  width: 520px;
  height: 50px;
  span{
    font-weight: 600;
    padding: 12px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
  }
}
.list_img{
border-radius: 10%;
  width: 310px;
  height: 220px;
  padding:0px;
  &:hover{
    transform: scale(1.1);
  }
}
</style>
